<template>
  <div class="blog-manage-context">
    <!-- 操作区域 -->
    <el-card class="handle-card">
      <div class="left">
        <el-select v-model="options.classes" placeholder="选择分类">
          <el-option
            v-for="item in classes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            clearable
          />
        </el-select>
        <el-select v-model="options.tags" placeholder="选择标签" multiple collapse-tags>
          <el-option
            v-for="item in tags"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="options.title"
          placeholder="查找标题"
          clearable
        />
      </div>
      <div class="right">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="blogEdit()">新增文章</el-button>
      </div>
    </el-card>
    <!-- 文章列表 -->
    <el-card>
      <el-table
        :data="blogList"
        stripe
        border
      >
        <el-table-column prop="title" label="文章标题" align="center" />
        <el-table-column prop="class" label="文章分类" align="center" />
        <el-table-column prop="tags" label="文章标签" align="center">
          <template slot-scope="scope">
            <el-tag v-for="item,index in scope.row.tags" :key="index" size="mini" :type="tagType(index)">{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="blogEdit(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="blogDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {

  },
  props: {

  },
  data() {
    return {
      options: {
        classes: '',
        tags: [],
        title: ''
      },
      classes: [{ value: 0, label: '科技' }, { value: 1, label: '娱乐' }],
      tags: [{ value: 0, label: '科技' }, { value: 1, label: '娱乐' }],
      blogList: [
        { id: 1, title: '标题1', class: '科技', tags: ['科技', '娱乐'] },
        { id: 2, title: '标题2', class: '娱乐', tags: ['科技', '娱乐'] }
      ]
    }
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
    tagType(index) {
      index++
      return index % 5 === 0 ? 'danger'
        : index % 4 === 0 ? 'warning'
          : index % 3 === 0 ? 'info'
            : index % 2 === 0 ? 'success'
              : ''
    },
    blogEdit(id) {
      this.$router.push(id ? `/blog/edit/${id}` : '/blog/edit')
    }
  }
}
</script>

<style scoped lang="scss">
.blog-manage-context{
  .handle-card{
    margin: 20px 0;
    ::v-deep .el-card__body{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
      display: flex;
      justify-content: space-between;
      .el-input{
        width: 150px;
        margin-right: 10px;
      }
    }
    }
  }
  .el-tag{
    margin: 0 3px;
  }
}
</style>
